LaTeX 수식 (HTML)

LaTeX의 TeX은 텍 이라고 읽으므로 LaTeX는 라텍 혹은 레이텍 이라고 읽습니다.

"수학 수식을 웹에서 표현하기"위한 방법으로 "CodeCogs"와 "HostMath", "MathJax"이다.

만약 수식 작성이 한두번만 사용하면 되는 간단한 경우거나,
이미지 파일로 넣기를 원한다면 "CodeCogs"또는 "HostMath"를, 수식 작성할 일이 많거나 사이트 내부에서 바로 적용하시려면 "MathJax"를 추천한다.

1. CodeCogs

CodeCogs의 경우 따로 설치 등의 복잡한 과정 없이 CodeCogs 사이트 에 접속하여 수식을 작성하면,
수식 작성창 밑에 작성한 수식이 실시간으로 보여줍니다.
수식을 다 작성한 뒤 글씨 크기, 굵기, 글꼴, 이미지 포맷등을 설정한 후 아래에 있는 "Click here to Download Image"버튼을 누르면 "수식을 이미지로 저장"할 수 있다.

HTML code가 필요한다.면 하단에 HTML code도 나오니 복사해서 사용하면 된다.
이미지로 저장할 수 있으니 PC든, 모바일이든 똑같은 이미지로 보여줄 수 있다.

다만 "이미지 파일"의 단점이라면, PC에서는 적당히 보이는게 "모바일에서는 너무 크거나 작게 보일 수도 있을 것"같습니다.

2.HostMath

HostMath의 경우, 앞서 언급한 CodeCogs와 사용법이 거의 비슷한다.
마찬가지로 HostMath 사이트 https://www.hostmath.com/ 를 접속해서 실시간으로 수식을 작성할 수 있고, CodeCogs보단 UI가 좀 더 깔끔하게 정리되어 있다.

다 작성한 수식은 하단의 Show External URL 또는 Show Embeded Code를 선택하면 복사 할 수 있다.
혹시라도 앞서 소개드린 CodeCogs에 문제가 있습니다면, 대안으로 HostMath를 이용하면 될 것 같습니다.

3.MathJax

CodeCogs / HostMath 와 다르게"직접 웹에서 띄울 수 있는 script를 추가하는 방식"이다.
공식 문서는 여기 를 참고하세요.

사용 방법으로는 CDN 서버를 통해 MathJax를 불러오면 되는데요. HTML의 </body>앞에 다음과 같이 추가해주면 된다.

<script src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
			

html에 MathJax를 적용했다면, 다음과 같이 복잡한 수식도 웹상에 바로 표현할 수 있다.
또한, 이미지가 아니므로 드래그를 통한 수식 복사도 가능한다.

				\\[i\hbar \frac{\partial}{\partial t} \Psi(r,t)=[\frac{-\hbar ^2}{2m} \nabla ^2 + V(r,t)]\Psi(r,t)\\]
				$$$i\hbar \frac{\partial}{\partial t} \Psi(r,t)=[\frac{-\hbar ^2}{2m} \nabla ^2 + V(r,t)]\Psi(r,t)$$$
			

예를 들어, "a^2+b^2=c^2+\frac{d}{e} "같은 수식을 작성후,
구분자(수식의 시작 및 종료를 나타냄)로 감싸주면 아래와 같이 표현된다.

$$$a^2+b^2=c^2+\frac{d}{e}$$$

이런식으로 수식이 $$a+b = c^2+\frac{d}{e} $$ "글 중간"에 수식을 표현하기 위해서는
인라인(inline)구분자를 사용하면 된다.

그리고 원래 초기에는 수식 작성 시작과 끝을 알려주는 " "가 \\( 와 \\)또는 \\[ 와 \\] 으로 지정돼 있는데요.
불편하면 기본 " "는 "$$$"로,인라인(inline)수식의 경우에는 "$$"로바꾸었습니다.

시작과 끝을 표시하는 구분자 (delimiter)를 바꾸시려면 다음과 같이 코드를 추가하시면 된다.

자세한 옵션들은 공식문서의 Configuration Options 을 참고하시면 된다.

			<script type="text/x-mathjax-config">
			MathJax.Hub.Config({tex2jax: { inlineMath: [['$$', '$$']], displayMath: [['$$$', '$$$']] }});
			</script>
			<script src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
			</script>
			

수식이 깨짐 현상 출처: https://stementor.tistory.com/notice/14 [STEMentor]

문제 발생

화면에서 수식이 표현되지 않고 Latex 수식이 그대로로 표현됩니다

문제 발생

문제의 해결 방법은 수식의 렌더링 방식을 변경해 주면 된다.
수식에 마우스를 대고 우클릭을 하면 메뉴가 보일 것이다.
Math Settings ⇨ Math Renderer 에서 HTML-CSS를 선택하면 된다.

참고로
크롬에서 블로그에 들어올 경우 Web font를 불러들이는 과정에서 문제가 있어 이미지로 대체하고 있다. 이 과정에서 크롬은 HTML/CSS 방식이 아닌 SVG 방식의 Image 만 지원을 하여 수식이 압축되어 보이는
문제가 발생될 수 있으며, SVG 로 변경 바랍니다.